<template>
  <div>
    <el-input v-model="elinput"></el-input>
    <el-table :data="filtereData" border style="width: 100%">
      <el-table-column
        v-for="(item,index) in headerData"
        :key="index"
        :prop="item.prop"
        :label="item.label | cap"
        :width="item.width"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
        elinput:"",
      headerData: [
        {
          prop: "name",
          label: "name",
          width: "150"
        },
        {
          prop: "Gender",
          label: "gender",
          width: "150"
        },
        {
          prop: "age",
          label: "age"
        }
      ],
      tableData:[
        {
            name:"rick",
            Gender:"男",
            age:"12"
        },
        {
            name:"Ross",
            Gender:"女",
            age:"12"
        },
        {
            name:"JACK",
            Gender:"女",
            age:"12"
        }
      ]
    };
  },
  filters:{
    cap:function(value){
       
        return value.charAt(0).toUpperCase() +value.slice(1)
    }
  },
  computed:{
    filtereData:function(){
        let _self = this;
        console.log()
        return _self.tableData.filter(function(item){
            return item.name.toLowerCase().indexOf(_self.elinput.toLowerCase())!==-1
        }) 
    }
  }
};
</script>